<template>
  <div class="container">
    <div class="login-box">
      <div class="title">登录</div>
      <a-row class="row">
        <a-col :span="6">用户名：</a-col>
        <a-col :span="18"
          ><a-input v-model:value="username" placeholder="请输入用户名"
        /></a-col>
      </a-row>
      <a-row class="row">
        <a-col :span="6">密码：</a-col>
        <a-col :span="18"
          ><a-input-password v-model:value="password" placeholder="请输入密码"
        /></a-col>
      </a-row>
      <div class="buttons row">
        <a-button type="primary" class="button" @click="login">登录</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import config from "@/config/index";
import axios from "axios";
// import qs from "qs";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      //message.success('This is a success message');
      const url = config.baseUrl + "/user/login";
      console.log("url", url);
      const data = {
        username: this.username, // 参数 firstName
        password: this.password, // 参数 lastName
      };
      // axios
      //   .post(url, qs.stringify(data), {
      //     headers: {
      //       "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
      //     },
      //   })
      //   .then(function (response) {
      //     console.log(response);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
      axios
        .post(url, data)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            message.success("登录成功");
          }else if(response.data.code==400){
            message.error("登录失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .login-box {
  width: 400px;
  height: 300px;
  background-color: rgb(217, 215, 215);
  padding: 10px;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 26px;
  padding: 20px;
}
.row {
  padding: 5px;
}

.buttons {
  width: 100%;
  text-align: center;
}

.button {
  width: 100px;
}
</style>